<template>
  <div class="home-box">
    <!-- swiper -->
    <div class="swiper-container home-box-container">
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item, index) in swiperList"
          :key="index"
        >
          <div class="banner-box">
            <div class="banner-box-title">
              <h3>{{ item.title }}</h3>
              <span>{{ "Shop now" }}</span>
            </div>
            <img :src="item.src" alt="" />
          </div>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <title-row title="New Arrivals" />
    <!-- New Arrivals -->
    <div class="new-arrivals-box">
      <el-row :gutter="6">
        <el-col
          :sm="6"
          :xs="12"
          v-for="(item, index) in arrivalsList"
          :key="index"
        >
          <product-item :obj="item" />
        </el-col>
      </el-row>
    </div>
    <title-row title="Sneakers" />
    <!-- Sneakers -->
    <div class="sneakers-box">
      <el-row :gutter="6">
        <el-col
          :sm="12"
          :xs="24"
          v-for="(item, index) in sneakersList"
          :key="index"
        >
          <product-item :obj="item" isTop />
        </el-col>
      </el-row>
    </div>
    <title-row title="Featured" />
    <!-- Featured -->
    <div class="featured-box">
      <el-row :gutter="6">
        <el-col
          :sm="6"
          :xs="24"
          v-for="(item, index) in featuredList"
          :key="index"
        >
          <product-item :obj="item" isTop />
        </el-col>
      </el-row>
    </div>
    <title-row title="Collections" />
    <!-- Collections -->
    <div class="collections-box">
      <el-row :gutter="6">
        <el-col
          :sm="12"
          :xs="24"
          v-for="(item, index) in collectionsList"
          :key="index"
        >
          <product-item :obj="item" isTop />
        </el-col>
      </el-row>
    </div>
    <!-- About us -->
    <div class="about-box">
      <el-row :gutter="6">
        <el-col :sm="12" :xs="24">
          <el-image :src="require('@/assets/Home/AboutUs/1.jpg')"></el-image>
        </el-col>
        <el-col :sm="12" :xs="24">
          <div class="content-box">
            <h3>About us</h3>
            <p v-for="(item, index) in aboutUsList" :key="index">{{ item }}</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- Newsletter -->
    <new-sletter class="new-sletter-box" />
  </div>
</template>

<script>
import "swiper/dist/css/swiper.min.css";
import "swiper/dist/js/swiper.min";
// import { setsList, guestCarts } from "@/api/user";
import { guestCarts } from '@/api/rest_api'
export default {
  data() {
    return {
      arrivalsList: [
        {
          src: require("@/assets/Home/NewArrivals/1.jpg"),
          content: "ADIDAS HARDEN VOL. 5(CRYSTAL WHITE/CLOUD WHITE/ROYAL BLUE)",
          price: "140.00"
        },
        {
          src: require("@/assets/Home/NewArrivals/2.jpg"),
          content: "NIKE AIR FORCE 1 RAYGUN(WHITE/BLACK-ORANGE FLASH-AMARILLO)",
          price: "110.00"
        },
        {
          src: require("@/assets/Home/NewArrivals/3.jpg"),
          content: "AIR JORDAN 6 RETRO AS BG(BLACK/BLACK-WHITE)",
          price: "100.00"
        },
        {
          src: require("@/assets/Home/NewArrivals/4.jpg"),
          content: "NIKE DUNK HIGH BODEGA LEGEND FAUNA BROWN",
          price: "300.00"
        }
      ],
      sneakersList: [
        {
          src: require("@/assets/Home/Sneakers/1.jpg"),
          title: "Air Jordan"
        },
        {
          src: require("@/assets/Home/Sneakers/2.jpg"),
          title: "Nike"
        }
      ],
      featuredList: [
        {
          src: require("@/assets/Home/Featured/1.jpeg"),
          title: "Reebok Classic Leather Legacy"
        },
        {
          src: require("@/assets/Home/Featured/2.jpeg"),
          title: "The North Face"
        },
        {
          src: require("@/assets/Home/Featured/3.jpeg"),
          title: "Converse x GOLF le FLEUR*"
        },
        {
          src: require("@/assets/Home/Featured/4.jpeg"),
          title: "ASICS x AWAKE NY"
        }
      ],
      collectionsList: [
        {
          src: require("@/assets/Home/Collections/1.jpg"),
          title: "Vans"
        },
        {
          src: require("@/assets/Home/Collections/2.jpg"),
          title: "The North Face"
        }
      ],
      aboutUsList: [
        "NighShop is a multi-brand online store specialized in the latest and most limited edition sneakers. ",
        "We have the most exclusive sneakers from brands such as Nike, adidas, ASICS, Converse, Vans, Jordan, Veja and Reebok. If you are looking for shoes to go running, hit the gym, practice outdoor sports, play basketball or follow the latest urban trends, at NighShop you'll find the models that best fit your personality and needs.",
        "In addition, at NighShop we bet on fashion by blurring the line between luxury and streetwear, with a versatile selection of clothes and accessories from some of most recognized and prestigious brands and designers world-wide.",
        "Comme des Garçons, GCDS, Paria Farzaneh, Minotaur, Midnight Studios, Kapital, Fumito Ganryu, Polo Ralph Lauren, Levi's vintage, Aries Arise, Rick Owens, 11 by Boris Bidjan Saberi, Carhartt Wip, POP Trading Company and Stussy are some of the firms we collaborate with.",
        "Discover functional yet aesthetics garments and create a flexible wardrobe that is ready to overcome everyday challenges. We offer the perfect balance between performance and fashion through textile technology, innovation in materials and creativity in design.",
        "Collaborations represent yet another of NighShop's strengths, with sub-brands like adidas Y-3 or Yeezy, and occasional launches of prestigious brands in partnership with designers and artists from different disciplines, like Kiko Kostadinov, Jerry Lorenzo, JW Anderson and Virgil Abloh with his brand Off-White.",
        "We offer a free 24h shipping express courier service to the rest of the world. In addition to NighShop online, we own 2 physical stores in Barcelona and Madrid. Our stores represent a new shopping concept, a space where fashion lovers can feel at home while being breathing in the latest trends."
      ],
      swiperList: [
        {
          src: require("@/assets/Home/Banner/1.jpg"),
          title: "AIR JORDAN 1 HIGH OG X J BALVIN"
        },
        {
          src: require("@/assets/Home/Banner/2.jpg"),
          title: "NIKE DUNK HI VARSITY MAIZE"
        },
        {
          src: require("@/assets/Home/Banner/3.jpg"),
          title: "Nike Air MAX 90"
        },
        {
          src: require("@/assets/Home/Banner/4.jpg"),
          title: "Nike ISPA Drifter Gato "
        },
        {
          src: require("@/assets/Home/Banner/5.jpg"),
          title: "Adidas Forum 84 Hi "
        }
      ],
      swiper: null
    };
  },

  components: {
    TitleRow: () => import("_c/TitleRow"),
    ProductItem: () => import("_c/ProductItem"),
    NewSletter: () => import("_c/NewSletter")
  },

  computed: {},

  beforeMount() {},

  mounted() {
    this.swiperInit();
    // this.loadList();
    // let searchCriteria = {
    // 	'searchCriteria[pageSize]': 1
    // }
    // setsList(searchCriteria).then(res => {
    //   console.log(res);
    // });
  },

  methods: {
    swiperInit() {
      this.swiper = new Swiper(".swiper-container", {
        loop: true,
        // 如果需要分页器
        pagination: ".swiper-pagination",
        // autoplay : 2000,
        autoplayDisableOnInteraction: false,
        paginationClickable: true
      });
    },
    async loadList() {
			let {error, res} = await guestCarts();
			if (error) return;
			this.$store.commit('user/SET_CARDCODE', res);
    }
  },

  watch: {}
};
</script>
<style lang="scss" scoped>
.home-box {
  .about-box,
  .collections-box,
  .sneakers-box,
  .featured-box,
  .new-arrivals-box {
    margin-bottom: 30px;
    overflow: hidden;
  }
  .about-box {
    margin-top: 50px;
    .content-box {
      background: #f6f6f6;
      padding: 40px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      text-align: left;
      font-size: 12px;
      h3 {
        font-size: 24px;
        margin-top: 0;
        margin-bottom: 0.69em;
      }
      p {
        line-height: 25px;
        margin: 0;
        margin-bottom: 10px;
      }
    }
  }
  .new-sletter-box {
    max-width: 366px;
    margin: 0 auto;
    margin-bottom: 30px;
  }
  .swiper-slide {
    img {
      width: 100%;
    }
  }
  .swiper-pagination {
    top: 10px;
  }
  .banner-box {
    width: 100%;
    position: relative;

    & > .banner-box-title {
      position: absolute;
      top: 30px;
      left: 10px;
      color: #1a1a1a;
      span {
        cursor: pointer;
        text-decoration: underline;
      }
    }
  }
}
</style>
